<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
            //1. v-if
                 <h1 v-if="ok"></h1>
                 <h1 v-else>No</h1>
            //2. 在 <template> 元素上使用 v-if 条件渲染分组
               //如果想切换多个元素呢,此时可以把一个 <template> 元素当做不可见的包裹元素，并在上面使用 
				    <template v-if="ok">
						  <h1>Title</h1>
						  <p>Paragraph 1</p>
						  <p>Paragraph 2</p>
					</template>
			//3. v-else
			   //使用 v-else 指令来表示 v-if 的“else 块”
			   //v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
			   <div v-if="Math.random() > 0.5">
				  Now you see me
				</div>
				<div v-else>
				  Now you don't
				</div>
			//4. v-else-if
			   //充当 v-if 的“else-if 块”，可以连续使用
			        <div v-if="type === 'A'">
					  A
					</div>
					<div v-else-if="type === 'B'">
					  B
					</div>
					<div v-else-if="type === 'C'">
					  C
					</div>
					<div v-else>
					  Not A/B/C
					</div>
			//5. 用key管理可复用的元素
		</script>
	</body>
</html>
